{% load static %}
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">
	<title>绘制第一个图表</title>
	<script src="{% static 'js/echarts.min.js' %}"></script>
	<script src="{% static 'js/china.js' %}"></script>
<!--	<script src="js/china.js"></script>-->
</head>
<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> 
	<div id="main" style="width: 1200px;height:500px;"></div> 
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		var mapName = 'china'

			{"name"var data1 = [
		    {"name":"北京","value":199},
		    {"name":"天津","value":-42},
		    {"name":"河北","value":102},
		    {"name":"山西","value":81},
		    {"name":"内蒙古","value":47},
		    {"name":"辽宁","value":67},
		    {"name":"吉林","value":82},
		    {"name":"黑龙江","value":123},
		    {"name":"上海","value":-24},
		    {"name":"江苏","value":92},
		    {"name":"浙江","value":114},
		    {"name":"安徽","value":109},
		    {"name":"福建","value":116},
		    {"name":"江西","value":91},
		    {"name":"山东","value":119},
		    {"name":"河南","value":137},
		    {"name":"湖北","value":116},
		    {"name":"湖南","value":114},
		    {"name":"重庆","value":91},
		    {"name":"四川","value":125},
		    {"name":"贵州","value":62},
		    {"name":"云南","value":83},
		    {"name":"西藏","value":-9},
		    {"name":"陕西","value":80},
		    {"name":"甘肃","value":56},
		    {"name":"青海","value":10},
		    {"name":"宁夏","value":18},
		    {"name":"新疆","value":180},
		    {"name":"广东","value":123},
		    {"name":"广西","value":59},
		    {"name":"海南","value":-14},
		    ];

		var geoCoordMap = {};
		var data2 = [:"北京","value":9},
		    {"name":"天津","value":2},
		    {"name":"河北","value":2},
		    {"name":"山西","value":1},
		    {"name":"内蒙古","value":7},
		    {"name":"辽宁","value":7},
		    {"name":"吉林","value":2},
		    {"name":"黑龙江","value":3},
		    {"name":"上海","value":4},
		    {"name":"江苏","value":2},
		    {"name":"浙江","value":4},
		    {"name":"安徽","value":9},
		    {"name":"福建","value":6},
		    {"name":"江西","value":1},
		    {"name":"山东","value":9},
		    {"name":"河南","value":7},
		    {"name":"湖北","value":6},
		    {"name":"湖南","value":4},
		    {"name":"重庆","value":1},
		    {"name":"四川","value":5},
		    {"name":"贵州","value":2},
		    {"name":"云南","value":3},
		    {"name":"西藏","value":9},
		    {"name":"陕西","value":0},
		    {"name":"甘肃","value":6},
		    {"name":"青海","value":1},
		    {"name":"宁夏","value":8},
		    {"name":"新疆","value":8},
		    {"name":"广东","value":3},
		    {"name":"广西","value":9},
		    {"name":"海南","value":4},
		    ];
		/*获取地图数据*/
		myChart.showLoading();
		var mapFeatures = echarts.getMap(mapName).geoJson.features;
		myChart.hideLoading();
		mapFeatures.forEach(function(v) {
		    // 地区名称
		    var name = v.properties.name;
		    // 地区经纬度
		    geoCoordMap[name] = v.properties.cp;
		
		});
		
		var convertData = function(data) {
		    var res = [];
		    for (var i = 0; i < data.length; i++) {
		        var geoCoord = geoCoordMap[data[i].name];
		        if (geoCoord) {
		            res.push({
		                name: data[i].name,
		                value: geoCoord.concat(data[i].value),
		            });
		        }
		    }
		    return res;
		};
		option = {
			title: {
		        text: "2019年各省份销售和利润情况",
		        textStyle: {
		            align: 'center',
		            color: '#fff',
		            fontSize: 20,
		        },
		        top: '5%',
		        left: 'center',
		    },
			tooltip:{
				show:true,
			},
			       visualMap: {
			            show: true,
			            left: '8%',
			            top: 'bottom',
			            seriesIndex: [1],
			            textStyle:{
			                color:'blue',
			             },
			        },
		    geo: {
		        show: true,
		        map: mapName,
		        roam: false,
		        itemStyle: {
		            normal: {
		                areaColor: '#023677',
		                borderColor: '#1180c7',
		            },
		            emphasis: {
		                areaColor: '#4499d0',
		            }
		        }
		    },
		    series: [
				{
		            name: '散点',
		            type: 'scatter',
		            coordinateSystem: 'geo',
		            data: convertData(data2),
		            label: {
		                normal: {
		                    formatter: '{b}',
		                    position: 'right',
		                    show: true,
		                    fontSize:8,
		                },
		                emphasis: {
		                    show: true,
		                    
		                }
		            },
		            itemStyle: {
		                normal: {
		                    color: '#fff',
		                    
		                }
		            }
		        },
		        {
		            type: 'map',
		            map: mapName,
		            geoIndex: 0,
		            aspectScale: 0.5, //长宽比
		            showLegendSymbol: false, // 存在legend时显示
		            label: {
		                normal: {
		                    show: true
		                },
		                emphasis: {
		                    show: false,
		                    textStyle: {
		                        color: '#fff'
		                    }
		                }
		            },
		            roam: true,
		            itemStyle: {
		                normal: {
		                    areaColor: '#031525',
		                    borderColor: '#FFFFFF',
		                },
		                emphasis: {
		                    areaColor: '#2B91B7'
		                }
		            },
		            animation: false,
		            data: data1
		        },
		        {
		            name: '散点',
		            type: 'effectScatter',
//		            animation: false,
		            coordinateSystem: 'geo',
		            data: convertData(data2),
		            symbolSize: function(val) {
		                return val[2]*2 ;
		            },
		            showEffectOn: 'render',
		            rippleEffect: { //涟漪特效
						period: 4, //动画时间，值越小速度越快
						brushType: 'stroke', //波纹绘制方式 stroke, fill
						scale: 4 //波纹圆环最大限制，值越大波纹越大
					},
		            hoverAnimation: true,
		            label: {
		                normal: {
		                    formatter: '{b}',
		                    position: 'left',
		                    show: false
		                }
		            },
		            itemStyle: {
		                normal: {
		                    color: 'yellow',
		                    shadowBlur: 10,
		                    shadowColor: 'yellow'
		                }
		            },
		            zlevel: 1
		        },
		
		    ]
		};
		myChart.setOption(option)
	</script>	
</body>

</html>